<template>
	<!--数据没请求回来就不创建-->
	<div v-if="filminfo">
		<img :src="filminfo.poster" class="poster">
		<h2>{{ filminfo.name }}</h2>
		
		<h3>演职人员</h3>
		<DetailSwiper perview="4" class="actorswiper" myclassname="actorswiper">
			<div class="swiper-slide" v-for="data in filminfo.actor_list" :key="data.name">
				<img :src="data.img" alt="">
				<p>{{ data.name }}</p>
			</div>
		</DetailSwiper>
		
		<h3>剧照</h3>
		<DetailSwiper perview="3" class="photoswiper" myclassname="photoswiper">
			<div class="swiper-slide" v-for="(data,index) in filminfo.photos_list" :key="index">
				<img :src="data" alt="">
			</div>
		</DetailSwiper>

	</div>
</template>

<script>
import axios from 'axios'
import DetailSwiper from './Detail/DetailSwiper'
// import bus from '@/bus'

import {HIDE_TABBAR_MUTATION,SHOW_TABBAR_MUTATION} from '@/type'

	export default{
		data(){
			return {
				filminfo:null
			}
		},
		components:{
			DetailSwiper
		},
		beforeMount(){
			// bus.$emit('maizuo',false);
			// this.$store.state.isTabbarShow = false
			
			// this.$store.commit('HideMaizuoTabbar',false);	//第一个参数就是mutation名字
			this.$store.commit(HIDE_TABBAR_MUTATION,false);	//第一个参数就是mutation名字
		},
		mounted(){
			console.log(this.$route.params.id)
			axios({
				url: `http://127.0.0.1:8003/filmlist/${this.$route.params.id}`
			})
			.then(res=>{
				console.log(res.data);
				this.filminfo = res.data;
			})
		},
		beforeDestroy(){
			// bus.$emit('maizuo',true)
			// this.$store.state.isTabbarShow = true
			
			// this.$store.commit("ShowMaizuoTabbar",true);
			this.$store.commit(SHOW_TABBAR_MUTATION,true);
		}
	}
</script>

<style scoped="">
	.poster{
		width: 100%;
		height: 200px;
		overflow: hidden;
	}
	.actorswiper img{
		height: 100px;
	}
	.photoswiper img{
		height: 100px;
	}
</style>
